<template>
  <view class="container">
    <view style=""></view>
    <navbar title="收银台"></navbar>
    <view class="body">
      <view class="pay-money">
        <text>实付金额</text>
        <view class="money">
          ￥<text>{{money}}</text>
        </view>
      </view>
      <view class="pay-method">
        <text>选择支付方式</text>
        <view class="item" @click="onClickPayMethod(1)">
          <view class="item-left">
            <image src="/static/images/Group2236@2x.png" mode=""></image>
            <text>微信</text>
          </view>
          <uni-icons v-if="isSelectWechat" type="circle"></uni-icons>
          <uni-icons v-else type="checkbox" color="#fc4911"></uni-icons>
        </view>
        <!-- <view class="item" @click="onClickPayMethod(2)">
          <view class="item-left">
            <image src="/static/images/Group2235@2x.png" mode=""></image>
            <text>支付宝</text>
          </view>
          <uni-icons v-if="!isSelectZifubao" type="circle"></uni-icons>
          <uni-icons v-else type="checkbox" color="#fc4911"></uni-icons>
        </view> -->
      </view>
    </view>
    <view class="footer-button">
      <FooterBottom :title="'微信支付￥'+ money" @onclick='gotoPay'></FooterBottom>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        money: '',
        isSelectWechat: false,
        isSelectZifubao: false,
        targetUserId: '',
        origin: '',
        id: ''
      };
    },
    onLoad({
      targetUserId,
      origin,
      id
    }) {
      if (origin) {
        this.origin = origin
      }
      if (id) {
        this.id = id
      }
      this.targetUserId = targetUserId
    },
    onShow() {
      this.getPayMonrey()
    },
    methods: {
      async getPayMonrey() {
        const res = await uni.gRequest.get('/app/config/configKey/unlock.contact.amount')
        this.money = res.msg
      },
      // 点击支付
      gotoPay() {
        const self = this
        uni.gRequest.post('/app/bill/pay', {
          targetUser: this.targetUserId,
          demandId: this.id,
          orderType: 1
        }).then(res => {
          self.successPay(res)
        })
      },
      successPay(res) {
        const self = this
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          signType: 'MD5',
          paySign: res.data.paySign,
          success: function(result) {
            // console.log(6666, 'resultresultresultresult');
            // 下单成功接口
            uni.gRequest.post('/app/bill/paycallback', {
              orderNumber: res.data.tradeNo
            }).then(res => {
              if (self.origin == 3) {
                uni.navigateTo({
                  url: `/pages/huoyuan_order_detail/huoyuan_order_detail?id=${self.id}`
                })
              } else if (self.origin == 4) {
                uni.navigateTo({
                  url: `/pages/celiang_order_detail/celiang_order_detail?id=${self.id}`
                })
              }
              // if (self.origin) {
              //   uni.navigateTo({
              //     url: `/pages/OrderDetail/OrderDetail?id=${self.id}`
              //   })
              // } else {
              //   uni.navigateTo({
              //     url: '/pages/driver_detail/driver_detail?targetUserId=' + self.targetUserId +
              //       '&isback=true'
              //   })
              // }
            })
          },
          fail: function(err) {
            console.log(err);
          }
        });
      },
      // 选着支付方式
      onClickPayMethod(i) {
        if (i == 1) {
          this.isSelectWechat = true
          this.isSelectZifubao = false
        } else {
          this.isSelectWechat = false
          this.isSelectZifubao = true
        }
      }
    }
  }
</script>

<style lang="scss">
  .body {
    .pay-money {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding-top: 80rpx;
      height: 500rpx;
      font-size: 32rpx;
      color: #000000;

      .money {
        margin-top: 16rpx;
        font-weight: 600;
        color: #000000;

        text {
          font-size: 60rpx;
        }
      }
    }
  }

  .pay-method {
    padding: 0 40rpx;

    text {
      font-weight: 500;
      font-size: 34rpx;
      color: #000000;
    }

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      font-size: 28rpx;

      .item-left {
        display: flex;
        align-items: center;

        image {
          width: 45rpx;
          height: 45rpx;
          margin-right: 20rpx;
        }
      }

      .uni-icons {
        font-size: 32rpx;
      }
    }
  }

  .footer-button {
    margin-top: 180rpx;
  }
</style>
